<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid brown; display: block; margin: auto;"></canvas>
		<div>
		</div>
		<script>
			window.onload = function() {
				var canvas = document.getElementById("canvas");
				var cxt = canvas.getContext("2d");
				canvas.width = 550;
				canvas.height = 400;
				smileface();
				function smileface() {
					//绘制人脸
					cxt.beginPath()
					cxt.fillStyle = "yellow";
					cxt.arc(100, 100, 80, 0, 2 * Math.PI);
					cxt.fill();
					cxt.closePath()
					//绘制眼睛
					cxt.beginPath()
					cxt.fillStyle = "black";
					cxt.arc(70, 80, 10, 0, 2 * Math.PI);
					cxt.arc(130, 80, 10, 0, 2 * Math.PI);
					cxt.fill();
					cxt.closePath()
					//绘制嘴巴
					cxt.beginPath()
					cxt.fillStyle = "black";
					cxt.arc(100, 100, 45, 1 / 6 * Math.PI, 5 / 6 * Math.PI);
					cxt.fill();
					cxt.closePath()
				}

				function cryface() {
					cxt.beginPath()
					cxt.fillStyle = "yellow";
					cxt.arc(100, 100, 80, 0, 2 * Math.PI);
					cxt.fill();
					cxt.closePath()
					//绘制眼睛
					cxt.beginPath()
					cxt.fillStyle = "black";
					cxt.arc(70, 80, 10, Math.PI, 2 * Math.PI, true);
					cxt.arc(130, 80, 10, Math.PI, 2 * Math.PI, true);
					cxt.fill();
					cxt.closePath()
					//绘制嘴巴
					cxt.beginPath()
					cxt.fillStyle = "black";
					cxt.arc(100, 100, 45, 1 / 6 * Math.PI, 5 / 6 * Math.PI);
					cxt.fill();
					cxt.closePath()
				}
               var i = 0;
			var mytime=window.setInterval(function() {
					cxt.clearRect(0, 0, canvas.width, canvas.height);				
					if (i % 2 == 0) {
						cryface();
					}
					else {
                        smileface();
					}
                   i++;
				}, 2000)
			}
		</script>
	</body>
</html>
